<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
      /*
      初级
      
      */
    // $(function() {

    //   var input = $('#J_input');

    //   //用来获取字数
    //   function getNum(){
    //     return input.val().length;
    //   }

    //   //渲染元素
    //   function render(){
    //     var num = getNum();

    //     //没有字数的容器就新建一个
    //     if ($('#J_input_count').length == 0) {
    //       input.after('<span id="J_input_count"></span>');
    //     };

    //     $('#J_input_count').html(num+'个字');
    //   }

    //   //监听事件
    //   input.on('keyup',function(){
    //     render();
    //   });

    //   //初始化，第一次渲染
    //   render();
    // })
// 2 作用域隔离

var textCount = {
  input:null,
  init:function(config){
    this.input = $(config.id);
    this.bind();
    //这边范围对应的对象，可以实现链式调用
    return this;
  },
  bind:function(){
    var self = this;
    this.input.on('keyup',function(){
      self.render();
    });
  },
  getNum:function(){
    return this.input.val().length;
  },
  //渲染元素
  render:function(){
    var num = this.getNum();

    if ($('#J_input_count').length == 0) {
      this.input.after('<span id="J_input_count"></span>');
    };

    $('#J_input_count').html(num+'个字');
  }
}

$(function() {
  //在domready后调用
  textCount.init({id:'#J_input'}).render();
})

  </script>
</head>
<body>
<input type="text" id="J_input"/>
</body>
</html>